<template>
  <div class="container">
    <div class="left-container">
      <el-card class="card" shadow="hover">
        <el-image lazy :src="clusterNumImage" style="width: 450px; height: 350px" :preview-src-list="srcList1" />
      </el-card>
      <el-card class="card" shadow="hover">
        <el-image lazy :src="parallelDiagramsImage" :preview-src-list="srcList2" style="width: 450px; height: 350px" />
      </el-card>
    </div>

    <div class="right-container">
      <el-card class="card" shadow="hover" style="height: 815px">
        <div ref="rightCard" style="width: 100%; height: 815px"></div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="js">
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router'; // 新增导入
  import * as echarts from 'echarts/core';
  import { TitleComponent, LegendComponent,ToolboxComponent } from 'echarts/components';
  import { RadarChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  import { getUserClusterFeatures } from '@/api';

  import clusterNumImage from '@/assets/images/cluster_num.png';
  import parallelDiagramsImage from '@/assets/images/parallel_diagrams.png';

  const srcList1 = [
    clusterNumImage,
  ]

  const srcList2 = [
    parallelDiagramsImage,
  ]

  echarts.use([TitleComponent, ToolboxComponent, LegendComponent, RadarChart, CanvasRenderer]);

  const rightCard = ref(null);
  const router = useRouter(); // 新增router对象

  const fetchUserClusterFeatures = async () => {
    try {
      const data = await getUserClusterFeatures(router);
      console.log(data);
      if (!Array.isArray(data)) {
        throw new Error('Invalid data format');
      }

      const featureNames = [...new Set(data.map(item => item.featureName))];
      const clusters = data.reduce((acc, feature) => {
        if (!acc[feature.clusterName]) {
          acc[feature.clusterName] = [];
        }
        acc[feature.clusterName].push(feature.featureValue);
        return acc;
      }, {});

      const option = {
        title: {
          text: '用户聚类特征雷达图'
        },
        toolbox: {
          feature: {
            dataView: { readOnly: true },
            restore: {},
            saveAsImage: {}
          }
        },
        legend: {
          data: Object.keys(clusters)
        },
        radar: {
          indicator: featureNames.map(name => ({ name, min: -3, max: 3 })),
          name: {
            textStyle: {
              color: '#000'
            }
          },
        },
        series: [
          {
            name: '用户聚类特征',
            type: 'radar',
            data: Object.entries(clusters).map(([name, value]) => ({
              value,
              name
            }))
          }
        ]
      };
      const chartDom = rightCard.value;
      const myChart = echarts.init(chartDom);
      myChart.setOption(option);
    } catch (error) {
      console.error('获取用户聚类特征失败', error);
    }
  };

  onMounted(() => {
    fetchUserClusterFeatures();
  });
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px;
    overflow-x: auto;
  }

  .left-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
  }

  .right-container {
    flex: 2;
    display: flex;
    flex-direction: column;
  }
</style>